<template>
  <div class="crumb-wrap">
    <span v-for="(item, index) in list" 
      :key="index" 
      :to="item.link" 
      v-text="item.name" 
      @click="onLink(item.link, index)">
    </span>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [
            {name: '首页', link: '/client'},
            {name: '授信', link: '/credit'}
          ]
        }
      }
    },
    methods: {
      onLink(link, index) {
        if (index !== this.list.length - 1) {
          this.$router.push(link)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .crumb-wrap {
    color: #999999;
    font-size: 14px;
    padding: 0 20px;

    span {
      margin-right: 8px;
      cursor: pointer;
      &::after {
        content: ">";
        display: inline-block;
        margin-left: 8px;
      }
      &:last-of-type {
        cursor: text;
      }
      &:last-of-type::after {
        display: none;
      }
    }
  }
</style>